<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>快乐购 - 用户管理</title>

		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

		<!-- CSS -->
		<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/glyphicons-halflings.min.css">
		<link rel="stylesheet" type="text/css" href="../css/default.min.css" />

		<!-- JS -->
		<script src="../js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/bootstrap.bundle.min.js" type="text/javascript" charset="utf-8"></script>
		
		<script src="../js/html/default.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/html/user.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
	<!--头部开始-->
	<div id="head-div">

	</div>
	<!--头部结束-->
	<script>
		$("#head-div").load("head.html");
	</script>

		<!-- 页面主体部分 -->
		<div class="container mt-2">
			<div class="h4 border-bottom">
				<span>用户管理</span>
				<a href="#modal-add-user" class="btn btn-sm btn-outline-success py-0 float-right" data-toggle="modal">新增用户</a>
			</div>

			<table class="table table-sm table-hover table-striped">
				<thead class="thead-dark">
					<tr>
						<th class="d-none d-md-table-cell">#</th>
						<th>用户名</th>
						<th>姓名</th>
						<th class="d-none d-md-table-cell">性别</th>
						<th class="d-none d-md-table-cell">电话</th>
						<th class="d-none d-md-table-cell">生日</th>
						<th>角色</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody id="body-div">


				</tbody>
			</table>
		</div>

		<!-- 用户详细模态框部分 -->
		<div id="modal-show-user" class="modal fade">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<div class="modal-title">
							<i class="glyphicon-zoom-in"></i>
							<span>用户详细信息</span>
						</div>
						<button class="close" data-dismiss="modal">&times;</button>
					</div>
					<div class="modal-body">
						<div class="container-fluid">
							<div class="row" id="XiangQing">

							</div>
						</div>
					</div>
					<div class="modal-footer">
						<button class="btn btn-outline-secondary" data-dismiss="modal">关闭</button>
					</div>
				</div>
			</div>
		</div>
		<!-- //用户详细模态框部分结束 -->

		<!-- 新增用户模态框部分 -->
		<div id="modal-add-user" class="modal fade">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<div class="modal-title">
							<i class="glyphicon-plus"></i>
							<span>新增用户详细</span>
						</div>
						<button class="close" data-dismiss="modal">&times;</button>
					</div>
					<div class="modal-body">
						<form id="form-add-user" class="container-fluid">
							<div class="row">
								<div class="col-md">
									<div class="form-group form-row">
										<label class="col-form-label pr-1">用户名：</label>
										<input type="text" class="col form-control" value="" required="required" name="login"/>
										<span id="login-error-message"></span>
									</div>
									<div class="form-group form-row">
										<label class="col-form-label pr-3 mr-1">姓名：</label>
										<input type="text" class="col form-control" value="" required="required" name="name"/>
									</div>
									<div class="form-group form-row">
										<label class="col-form-label pr-3 mr-1">性别：</label>
										<div class="col form-control-plaintext">
											<label class="form-check-inline">
												<input type="radio" name="sex" value="男" checked="checked" />
												<span>帅哥</span>
											</label>
											<label class="form-check-inline">
												<input type="radio" name="sex" value="女" />
												<span>美女</span>
											</label>
										</div>
									</div>
									<div class="form-group form-row">
										<label class="col-form-label pr-3 mr-1">生日：</label>
										<input type="date" class="col form-control" value="" name="birthday"/>
									</div>
									<div class="form-group form-row">
										<label class="col-form-label pr-3 mr-1">角色：</label>
										<div class="col form-control-plaintext">
											<label class="form-check-inline">
												<input type="radio" name="master" value="1" checked="checked" />
												<span>用户</span>
											</label>
											<label class="form-check-inline">
												<input type="radio" name="master" value="2" />
												<span>管理员</span>
											</label>
										</div>
									</div>
								</div>

								<div class="col-md-4">
									<div class="form-group">
										<label>
											<input type="file" accept="image/*" hidden="hidden" />
											<img id="photo" src="../img/users/user_default.png" class="img-thumbnail img-circle center-block" />
										</label>
										<input name="photo" id="img" type="file" accept="image/*" hidden="hidden" />
										<div class="text-muted">*点击设置头像</div>
									</div>
								</div>
							</div>
						</form>
					</div>
					<div class="modal-footer">
						<button class="btn btn-outline-success" form="form-add-user" type="button" id="tj-btn">新增用户</button>
						<button class="btn btn-outline-secondary" data-dismiss="modal" type="button">关闭</button>
					</div>
				</div>
			</div>
		</div>
		<!-- //新增用户模态框部分结束 -->

		<!-- 编辑用户模态框部分 -->
		<div id="modal-edit-user" class="modal fade">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<div class="modal-title">
							<i class="glyphicon-plus"></i>
							<span>编辑用户详细</span>
						</div>
						<button class="close" data-dismiss="modal">&times;</button>
					</div>
					<div class="modal-body" id="Update-div">
						<form id="form-edit-user" action="" class="container-fluid">
							<div class="row">
								<div class="col-md">
									<div class="form-group form-row">
										<label class="col-form-label pr-1">用户名：</label>
										<input type="text" class="col form-control" value="" required="required" name="login"/>
										<input  type="hidden" name="id"/>
										<span id="login-error-update"></span>
									</div>
									<div class="form-group form-row">
										<label class="col-form-label pr-3 mr-1">姓名：</label>
										<input type="text" class="col form-control" value="" required="required" name="name"/>
									</div>
									<div class="form-group form-row">
										<label class="col-form-label pr-3 mr-1">性别：</label>
										<div class="col form-control-plaintext">
											<label class="form-check-inline">
												<input type="radio" name="sex" value="男" />
												<span>帅哥</span>
											</label>
											<label class="form-check-inline">
												<input type="radio" name="sex" value="女" />
												<span>美女</span>
											</label>
										</div>
									</div>
									<div class="form-group form-row">
										<label class="col-form-label pr-3 mr-1">生日：</label>
										<input type="date" class="col form-control" value="" name="birthday"/>
									</div>
									<div class="form-group form-row">
										<label class="col-form-label pr-3 mr-1">角色：</label>
										<div class="col form-control-plaintext">
											<label class="form-check-inline">
												<input type="radio" name="master" value="1" />
												<span>用户</span>
											</label>
											<label class="form-check-inline">
												<input type="radio" name="master" value="2" />
												<span>管理员</span>
											</label>
										</div>
									</div>
								</div>

								<div class="col-md-4">
									<div class="form-group">
										<label>
											<img id="photo-update" src="../" class="img-thumbnail img-circle center-block photo"  />
										</label>
										<input name="photo-update" id="img-update" type="file" accept="image/*" hidden="hidden"/>
										<div class="text-muted">*点击设置头像</div>
									</div>
								</div>
							</div>
						</form>
					</div>
					<div class="modal-footer">
						<button class="btn btn-outline-success" form="form-edit-user" type="submit" id="gx-btn">更新用户</button>
						<button class="btn btn-outline-secondary" data-dismiss="modal" type="button">关闭</button>
					</div>
				</div>
			</div>
		</div>
		<!-- //编辑用户模态框部分结束 -->

		<!-- //页面主体部分结束 -->

		<!-- 页面脚部部分 -->
	<!--脚部分开始-->
	<div id="footer-div">

	</div>
	<!--脚部分结束-->
	<script>
		$("#footer-div").load("footer.html");
	</script>
		<!-- //页面脚部部分结束 -->

	</body>

</html>
